<template>
  <page-main>
    <template #right>
      <!-- <el-button type="default" icon="download" @click="handleExport('分配记录','/admin/settlementRecord/export', {})">导出</el-button> -->
    </template>
    <el-form :inline="true" :model="form" label-width="80" class="search-form">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :lg="8" :xl="6">
          <el-form-item label="日期：">
            <my-date-range ref="refMyDateRange" v-model:start="searchForm.startDate" v-model:end="searchForm.endDate" type="daterange" />
            <!-- <el-date-picker v-model="searchForm.yearMonth" type="month" value-format="YYYY-MM" placeholder="请选择"/> -->
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="8" :xl="6">
          <el-form-item>
            <el-button type="primary" icon="Search" @click="getList">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- <el-descriptions :column="5" border direction="vertical">
      <el-descriptions-item label="拉新奖励">{{ tableData.list.referral }}</el-descriptions-item>
      <el-descriptions-item label="分会奖励">{{ tableData.list.branchOperation }}</el-descriptions-item>
      <el-descriptions-item label="城市运营">{{ tableData.list.cityOperation }}</el-descriptions-item>
      <el-descriptions-item label="会员入会">{{ tableData.list.membership }}</el-descriptions-item>
      <el-descriptions-item label="活动收入">{{ tableData.list.activitesBill }}</el-descriptions-item>
      <el-descriptions-item label="提现支出">{{ tableData.list.withdraw }}</el-descriptions-item>
    </el-descriptions> -->
    <el-table
          v-loading="tableData.loading"
          ref="refTable"
          :data="tableData.list"
          stripe
          border
          style="width: 100%"
          >
          <el-table-column label="拉新奖励" prop="referral"/>
          <el-table-column label="分会奖励" prop="branchOperation"/>
          <el-table-column label="城市运营" prop="cityOperation"/>
          <el-table-column label="会员入会" prop="membership"/>
          <el-table-column label="活动收入" prop="activitiesBill"/>
          <el-table-column label="提现支出" prop="withdraw"/>
        </el-table>
  </page-main>
</template>

<script setup lang="ts">
import {dayjs} from 'element-plus';
const {proxy} :any = getCurrentInstance() as ComponentInternalInstance;
let searchForm = reactive({
  startDate: dayjs().startOf('month').format('YYYY-MM-DD'),
  endDate: dayjs().format('YYYY-MM-DD')
});
let tableData = reactive({
  loading: false,
  list: [],
})
const getList = () => {
  tableData.loading = true;
  proxy.$request('get', '/admin/statistics/getFinancialDetails', searchForm, (data,msg) => {
    if(data){
      tableData.list = [data];
    }
    tableData.loading = false;
  },msg => {
    tableData.loading = false;
  })
}
onMounted(async () => {
  getList()
  
})
</script>

<style>

</style>